<template>
	<view class="consult">
		<!-- #ifdef H5 -->
		<custom-navbar title="联系客服" />
		<!-- #endif -->
		<view class="consultTop">
			<image src="https://image.chushouya.com/assets/images/home/img_tx1.png?88282" mode="aspectFill"></image>
			<view class="card">
				<view class="name"><text>{{serviceData.kefuName}}</text><text>｜回收顾问</text></view>
				<view class="service">专业在线1V1帮您解决回收疑问</view>
			</view>
		</view>
		<view class="consultContent">
			<view class="longPress">长按二维码识别添加微信，随时为您服务</view>
			<image :src="serviceData.kefuQrcode" mode="aspectFill" class="erWeiCode" :show-menu-by-longpress="true"></image>
			<view class="callTel" @click="makePhoneCall">
				<image src="https://image.chushouya.com/assets/images/home/icon_bddh.png" mode="aspectFill"></image>拨打电话：{{serviceData.kefuPhone}}
			</view>
			<view class="spliteLine"></view>
			<view class="pleaseAdd">— 请添加售后经理联系方式为您提供如下服务 —</view>
			<view class="serviceList">
				<view class="service">
					<image src="https://image.chushouya.com/assets/images/home/icon_zfwt.png" mode="aspectFill"></image>
					<view>支付问题</view>
				</view>
				<view class="service">
					<image src="https://image.chushouya.com/assets/images/home/icon_shwt.png" mode="aspectFill"></image>
					<view>售后问题</view>
				</view>
				<view class="service">
					<image src="https://image.chushouya.com/assets/images/home/icon_zyjd.png" mode="aspectFill"></image>
					<view>专业解答</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getServiceData } from '@/api'
	export default {
		data() {
			return {
				serviceData: {}
			}
		},
		onShow() {
			getServiceData().then(({ data, code }) => {
          		if (code === 200 && data) {
					this.serviceData = data
				}
			})
		},
		methods: {
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.serviceData.kefuPhone,
					success: function () {
						console.log('拨打电话成功！');
					},
					fail: function (err) {
						console.log('拨打电话失败：', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #F6F7F9;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.consult {
		width: 100%;
		background: #FFF3DC;
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.consultTop {
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 88rpx;
				height: 88rpx;
				margin-right: 24rpx;
			}

			.card {
				.name {
					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;

						&:last-child {
							font-weight: 400;
							font-size: 26rpx;
							margin-left: 8rpx;
						}
					}
				}

				.service {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #ADA595;
					line-height: 34rpx;
					margin-top: 8rpx;
				}
			}
		}

		.consultContent {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 48rpx 54rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.longPress {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
			}

			.erWeiCode {
				width: 388rpx;
				height: 388rpx;
				margin-top: 26rpx;
				margin-bottom: 48rpx;
			}

			.callTel {
				text-align: center;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 50rpx;
				border: 1rpx solid #FFAA00;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFAA00;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}

			.spliteLine {
				width: 100%;
				border: 1rpx dashed #EEEEEE;
				margin-top: 48rpx;
				margin-bottom: 46rpx;
			}

			.pleaseAdd {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #A7ABB2;
				margin-bottom: 46rpx;
			}

			.serviceList {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12rpx;

				.service {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 12rpx;
					}
				}
			}
		}
	}
</style>